<!DOCTYPE html>
<html>
	<head>
		<!--<meta charset="utf-8" />-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/first.css"/>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--头部-->
			<div class="top">
				<span>Free Shopping For Orders Over $50</span>
			</div>
			<div class="head">
				<div class="h_logo">
					<div class="logo">
						<img src="img/Index.png"/>
					</div>
				</div>
				<div class="h_bar">
					<div class="bar" >
						<div  v-for="i in bar" class="float" @click="cli(i)" :class="{act:i==isact}">
							{{i}}
						</div>
						<div class="float b_img">
							<img src="img/s.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			
			<!--轮播图-->
			<div class="switch" id="swc">
				<img src="img/1.png"/>
			</div>
			
			<!--精选-->
			<div class="select">
				<div class="sl">
					<img src="img/2.png"/>
				</div>
				<div class="sc">
					<div class="sc_item">
						<div class="sci_itema">
							<img src="img/5.png"/>
						</div>
						<div class="sci_itemb">
							<img src="img/4.png"/>
						</div>
					</div>
					<div class="sc_item">
						<div class="sci_itemc">
							<img src="img/6.png"/>
						</div>						
						<div class="sci_itemd">
							<img src="img/7.png"/>
						</div>
					</div>
				</div>
				<div class="sr">
					<img src="img/3.png"/>
				</div>				
			</div>
			
			<!--列表-->
			<h3>Check Our Products</h3>
			<div class="list">
				<div class="list-item" v-for="i in goods">
					<div class="list-img">
						<div class="l_btn" v-show="i.sale">SALE!</div>
					<img :src="i.img"/>
					</div>
					<div class="content">
						<p>{{i.name}}</p>
						<div class="flex">
							<del class="flex_itema" v-show="i.sale">${{i.price+10}}</del>&nbsp;&nbsp;
							<span class="flex_itemb">${{i.price}}</span>
							
						</div>
					</div>
				</div>
								
			</div>
			
			<br />
			<div class="btf"><button class="btn" >VIEW ALL PRODUCT</button></div>
			<br />
			
			<!--邮件-->
			<div class="sletter">
				<h3>Newsletter</h3>
				<span class="cen">Get timely updates from your favorite products.</span>
				<div class="email">
					<input type="text" name="e-mail"  placeholder="Your e-mail..."/>
					<div class="s_btn"></div>
				</div>
			</div>
			
			<!--底部图片-->
			<div class="f_logo">
				<div class="f_img" v-for="i in imgs">
					<img :src="i"/>
				</div>
			</div>
			<br />
			<br />
			
			
			<!--底部-->
			<div class="foot">
				<div class="f_item f_r">
					<div class="i_logo">
						<img src="img/Index.png"/>
					</div>
					There are many variations of passages of Lorem Ipsum avaliaable,but the majority have suffered alteration in some form,by injected humour,or randomised words which don't look even slightly believable.
					<div class="f_box"><img src="img/lg2.png"/></div>
				</div>
				<div class="f_item f_m">
					<h4>Useful Links</h4>
					<div class="m_item" v-for="(item,i) in useful" :key="i">
						<div class="mi_item">{{item.left}}</div>
						<div class="mi_item">{{item.right}}</div>
					</div>
				</div>
				<div class="f_item f_l">
					<h4>Contact Us</h4>
					<div class="fl_item">
						<div class="fl_img"><img src="img/email.png"/></div>
						<div class="fl_b">622 Dixie Path,South Tobinches-ter-UT98336</div>
					</div>
					<div class="fl_item">
						<div class="fl_img"><img src="img/email.png"/></div>
						<div class="fl_b">+149-845-9488</div>
					</div>
					<div class="fl_item">
						<div class="fl_img"><img src="img/email.png"/></div>
						<div class="fl_b">Example@email.com</div>
					</div>
					<div class="fl_item">
						<div class="fl_img"><img src="img/email.png"/></div>
						<div class="fl_b">Example@email.com</div>
					</div>
				</div>
			</div>
			
			
			<br class="bra" />
			<br class="brb" />
			<hr />
			<span>Copyright © 2021 Hackpp.All Rights Reserved.</span>
			<br />
		</div>
		<script src="js/control.js"></script>
	</body>
</html>
